<!DOCTYPE html>
<html lang="zh-CN">
  	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>新年快乐</title>
	    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	    <link rel="stylesheet" type="text/css" href="css/common.css">
	    <link rel="icon" type="image/x-icon" href="image/title_12.png">
	    <style type="text/css">
	    	html,body{
	    		width: 100%;
	    		height: 100%;
	    		overflow:hidden;
	    	}
		.page{
			width: 100%;
			max-width: 1000px;
			height: 100%;
			background-color: #ce000d;
			margin: 0 auto;
			position: relative;
		}
		.beijing{
			width: 100%;
			height: 100%;
			background-image: url(image/con_back.jpg);
			position: absolute;
			z-index: 10;
		}
	    	.container{
	    		width: 100%;
	    		height: 100%;
	    		text-align: center;
	    		position: absolute;
	    		z-index: 100;
	    	}
	    	/*image begin*/
		.div-top{
			height: 50px;
			position: absolute;
			top: -30px;
			padding-left: 0px;
			padding-right: 0px;

		}
		.div-top img{
			height: 50px;
			width: 1000px;
			position: absolute;
			left: 50%;
			margin-left: -500px;
		}
		.div-bottom{
			height: 180px;
			position: absolute;
			bottom: -30px;
			padding-left: 0px;
			padding-right: 0px;
		}
		.div-bottom img{
			height: 100%;
			width: 1000px;
			position: absolute;
			left: 50%;
			margin-left: -500px;
		}
		/*text begin*/
		.xinnian-text{
			width: 100%;
			height: 50px;
			position: absolute;
			top: 15%;
		}
		.xinnian-text p{
			display: none;
			color: yellow;
			font-size: 30px;
			font-weight: 700;
		}
		.text-xin{
			position: absolute;
			left: 25%;
			top: -25px;
		}
		.text-nian{
			position: absolute;
			left: 42%;
			top: 25px;
		}
		.text-kuai{
			position: absolute;
			left: 58%;
			top: -25px;
		}
		.text-le{
			position: absolute;
			left: 75%;
			top: 25px;
		}
		/*烟花 begin*/
		.fireworks-1{
			width: 100%;
			height: 100%;
			position: absolute;
		}
		.fireworks-2{
			width: 100%;
			height: 100%;
			position: absolute;
		}
		/*发射*/
		.fireworks-1-1{
			display: none;
			width: 100px;
			height: 100px;
			position: absolute;
			bottom: -20%;
			left: 40%;
		}
		.fireworks-1-1 img{
			width: 100px;
			height: 100px;
		}
		/*散开*/
		.fireworks-1 .san{
			display: none;
			width: 100px;
			height: 100px;
			position: absolute;
			bottom: 60%;
			left: 40%;
			margin-left: -50px;
			transform-origin: right top;
		}
		.fireworks-1 .san-image{
			width: 100px;
			height: 100px;
		}
		.fireworks-2 .san{
			display: none;
			width: 100px;
			height: 100px;
			position: absolute;
			bottom: 60%;
			left: 40%;
			margin-left: -50px;
			transform-origin: right top;
		}
		.fireworks-2 .san-image{
			width: 100px;
			height: 100px;
		}
		.fireworks-1-3{
			transform: rotate(45deg);
		}
		.fireworks-1-4{
			transform: rotate(90deg);
		}
		.fireworks-1-5{
			transform: rotate(135deg);
		}
		.fireworks-1-6{
			transform: rotate(180deg);
		}
		.fireworks-1-7{
			transform: rotate(225deg);
		}
		.fireworks-1-8{
			transform: rotate(270deg);
		}
		.fireworks-1-9{
			transform: rotate(315deg);
		}
	    </style>
  	</head>
  	<body>
  		<div class="page">
  			<div class="beijing">
  				<div class="fireworks-1">
  					<div class="fireworks-1-1"><img src="image/yanhua01.png"></div>
  					<div class="fireworks-1-2 san"><img src="image/yanhua02.png" class="san-image"></div>
  					<div class="fireworks-1-3 san"><img src="image/yanhua02.png" class="san-image"></div>
  					<div class="fireworks-1-4 san"><img src="image/yanhua02.png" class="san-image"></div>
  					<div class="fireworks-1-5 san"><img src="image/yanhua02.png" class="san-image"></div>
  					<div class="fireworks-1-6 san"><img src="image/yanhua02.png" class="san-image"></div>
  					<div class="fireworks-1-7 san"><img src="image/yanhua02.png" class="san-image"></div>
  					<div class="fireworks-1-8 san"><img src="image/yanhua02.png" class="san-image"></div>
  					<div class="fireworks-1-9 san"><img src="image/yanhua02.png" class="san-image"></div>
  				</div>
  				<div class="fireworks-2">
  					<div class="fireworks-1-1"><img src="image/yanhua01.png"></div>
  					<div class="fireworks-1-2 san"><img src="image/yanhua02.png" class="san-image"></div>
  					<div class="fireworks-1-3 san"><img src="image/yanhua02.png" class="san-image"></div>
  					<div class="fireworks-1-4 san"><img src="image/yanhua02.png" class="san-image"></div>
  					<div class="fireworks-1-5 san"><img src="image/yanhua02.png" class="san-image"></div>
  					<div class="fireworks-1-6 san"><img src="image/yanhua02.png" class="san-image"></div>
  					<div class="fireworks-1-7 san"><img src="image/yanhua02.png" class="san-image"></div>
  					<div class="fireworks-1-8 san"><img src="image/yanhua02.png" class="san-image"></div>
  					<div class="fireworks-1-9 san"><img src="image/yanhua02.png" class="san-image"></div>
  				</div>
  			</div>
  			<div class="container">
	    			<div class="row">
					 <div class="col-xs-12 col-md-12 div-top"><img src="image/01.png"></div>
					 <div class="xinnian-text">
					 	<p class="text-xin text-1">新</p>
					 	<p class="text-nian text-2">年</p>
					 	<p class="text-kuai text-1">快</p>
					 	<p class="text-le text-2">乐</p>
					 </div>
					 <div class="col-xs-12 col-md-12 div-bottom"><img src="image/05.png"></div>
				</div>
				<audio src="audio/kanong1.mp3" autoplay="autoplay" loop></audio>
	    		</div>
  		</div>
    		


	    	<script src="js/jquery-3.2.1.min.js"></script>
	    	<script src="bootstrap/js/bootstrap.min.js"></script>
	    	<script type="text/javascript">
	    		//图片划出
	    		var topImage_y = -30;
	    		function bottomImageShow(){
	    			topImage_y +=2;
	    			if (topImage_y <= 0) {
	    				$(".div-top").css("top", topImage_y+"px");
	    				$(".div-bottom").css("bottom", topImage_y+"px");
	    			}else{
	    				clearInterval(imageShowTimer);
	    			}
	    		}
	    		var imageShowTimer = setInterval(bottomImageShow,70);
	    		
	    		//文字动画
	    		var textShowTimer = null, textShow_y = 25;
	    		function textShowFun_1(){
	    			textShow_y -=1;
	    			if (textShow_y >= 15) {
	    				$(".text-1").css("top", -textShow_y+"px");
	    				$(".text-2").css("top", textShow_y+"px");
	    			}else{
	    				clearInterval(textShowTimer);
	    			}
	    		}
	    		function textShowFun(){
	    			$(".text-1").css("display","block");
	    			$(".text-2").css("display","block");
	    			textShowTimer = setInterval(textShowFun_1,70);
	    		}
	    		setTimeout(textShowFun,1200);

	    		//烟花  begin
	    		var fireobj_1 = {"fireobj" : ".fireworks-1",
	    			"fireworksShowM_y" : -20, 
	    			"fireworks_lx" : 40,
	    			"fireworks_by" : 60,
	    			"fireworks_rx" : 40,
	    			"fireworks_ty" : 60,
	    			"fireworks_lxx" : 40,
	    			"fireworks_byy" : 60,
	    			"fireworks_rxx" : 40,
	    			"fireworks_tyy" : 60,
	    			"fireworks_position" : 1,
	    			"fireworksTimerM" : null,
	    			"fireworksTimerC" : null};
	    		var fireobj_2 = {"fireobj" : ".fireworks-2",
	    			"fireworksShowM_y" : -20, 
	    			"fireworks_lx" : 40,
	    			"fireworks_by" : 60,
	    			"fireworks_rx" : 40,
	    			"fireworks_ty" : 60,
	    			"fireworks_lxx" : 40,
	    			"fireworks_byy" : 60,
	    			"fireworks_rxx" : 40,
	    			"fireworks_tyy" : 60,
	    			"fireworks_position" : 1,
	    			"fireworksTimerM" : null,
	    			"fireworksTimerC" : null};
	    		//散开
	    		function fireworksC(fireobj){
	    			if($(".page").width() > $(".page").height()){
	    				fireobj.fireworks_lx -= 0.8;
		    			fireobj.fireworks_by -= 1;
		    			fireobj.fireworks_rx += 0.8;
		    			fireobj.fireworks_ty += 1;
		    			fireobj.fireworks_lxx -= 0.7;
		    			fireobj.fireworks_byy -= 0.8;
		    			fireobj.fireworks_rxx += 0.7;
		    			fireobj.fireworks_tyy += 0.8;
	    			}else{
	    				fireobj.fireworks_lx -= 1.1;
		    			fireobj.fireworks_by -= 0.6;
		    			fireobj.fireworks_rx += 1.1;
		    			fireobj.fireworks_ty += 0.6;
		    			fireobj.fireworks_lxx -= 0.8;
		    			fireobj.fireworks_byy -= 0.5;
		    			fireobj.fireworks_rxx += 0.8;
		    			fireobj.fireworks_tyy += 0.5;
	    			}
	    			if (fireobj.fireworks_lx >= 20) {
	    				$(fireobj.fireobj+" .fireworks-1-2").css({"left" : fireobj.fireworks_lxx+"%", "bottom" : fireobj.fireworks_byy+"%"});
	    				$(fireobj.fireobj+" .fireworks-1-3").css({"left" : fireobj.fireworks_lx+"%"});
	    				$(fireobj.fireobj+" .fireworks-1-4").css({"left" : fireobj.fireworks_lxx+"%", "bottom" : fireobj.fireworks_tyy+"%"});
	    				$(fireobj.fireobj+" .fireworks-1-5").css({"bottom" : fireobj.fireworks_ty+"%"});
	    				$(fireobj.fireobj+" .fireworks-1-6").css({"left" : fireobj.fireworks_rxx+"%", "bottom" : fireobj.fireworks_tyy+"%"});
	    				$(fireobj.fireobj+" .fireworks-1-7").css({"left" : fireobj.fireworks_rx+"%"});
	    				$(fireobj.fireobj+" .fireworks-1-8").css({"left" : fireobj.fireworks_rxx+"%", "bottom" : fireobj.fireworks_byy+"%"});
	    				$(fireobj.fireobj+" .fireworks-1-9").css({"bottom" : fireobj.fireworks_by+"%"});
	    			}else{
	    				//清除定时器，回归原位，重置参数
		    			clearInterval(fireobj.fireworksTimerC);
	    				$(fireobj.fireobj+" .san").css({"display" :  "none", "bottom" : "60%", "left" : "40%"});
	    				fireobj.fireworks_lx = 40;
		    			fireobj.fireworks_by = 60;
		    			fireobj.fireworks_rx = 40;
		    			fireobj.fireworks_ty = 60;
		    			fireobj.fireworks_lxx = 40;
		    			fireobj.fireworks_byy = 60;
		    			fireobj.fireworks_rxx = 40;
		    			fireobj.fireworks_tyy = 60;
	    			}
	    		}
	    		//发射
	    		function fireworksM(fireobj){
	    			fireobj.fireworksShowM_y += 1;
	    			if (fireobj.fireworksShowM_y  <= 60) {
	    				$(fireobj.fireobj+" .fireworks-1-1").css("bottom", fireobj.fireworksShowM_y+"%");
	    			}else{
	    				//清除定时器，回归原位，重置参数，散开显示
		    			clearInterval(fireobj.fireworksTimerM);
		    			$(fireobj.fireobj+" .fireworks-1-1").css("display", "none");
	    				$(fireobj.fireobj+" .fireworks-1-1").css("bottom", "-20%");
	    				fireobj.fireworksShowM_y  = -20;
	    				$(fireobj.fireobj+" .san").css("display", "block");
		    			fireobj.fireworksTimerC = setInterval(function(){fireworksC(fireobj)},30);	
	    			}
	    		}

	    		function fireworksFun(fireobj){
	    			console.log("祝各位同行新年快乐！");
	    			//发射位置随机
	    			fireobj.fireworks_position = Math.ceil(Math.random()*10);
	    			if (0 <= fireobj.fireworks_position && fireobj.fireworks_position <= 3) {
	    				$(fireobj.fireobj).css({"left" : "0%", "bottom" : "0%"});
	    			}
	    			else if (3 < fireobj.fireworks_position && fireobj.fireworks_position <= 5) {
	    				$(fireobj.fireobj).css({"left" : "15%", "bottom" : "-10%"});
	    			}
	    			else if (5 < fireobj.fireworks_position && fireobj.fireworks_position <= 8) {
	    				$(fireobj.fireobj).css({"left" : "-15%", "bottom" : "-10%"});
	    			}
	    			else{
	    				$(fireobj.fireobj).css({"left" : "0%", "bottom" : "-20%"});
	    			}
	    			$(fireobj.fireobj+" .fireworks-1-1").css("display", "block");
	    			fireobj.fireworksTimerM = setInterval(function(){fireworksM(fireobj)},20);	
	    		}
	    		var fireworksTimer = setInterval(function(){fireworksFun(fireobj_1)},2500);
	    		var fireworksTimer_2 = setInterval(function(){fireworksFun(fireobj_2)},3930);
	    	</script>
  	</body>
</html>